<!--
@fucntion: 大创项目-申报-表单
-->
<template>
  	<el-container class="declaration-form">
		<el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">立项申报表</span>
	      <div>
	      	<el-button v-show="declarationRecord.xmsbbh && declarationRecord.xmsbbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
	  <el-main class="main">
      <!-- 项目基本信息 -->
      <el-container style="height:100%;" v-if="!declarationRecord.xmsbbh || declarationRecord.xmsbbh=='' ">
        <el-header>
          <h3>项目申报基本信息</h3>
        </el-header>
        <el-main>
          <el-form ref="introductionForm" :model="declarationRecord" :rules="declarationRules"
          label-position="right" label-width="120px" size="mini" status-icon>
            <el-row>
              <el-col :offset="4" :span="16">
                <el-form-item label="推荐学院" prop="xymc">
                  <el-input v-model="declarationRecord.xymc" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="xmmc">
                  <el-input v-model="declarationRecord.xmmc"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目主持人" prop="xm">
                      <el-input v-model="declarationRecord.xm" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="年级" prop="njmc">
                      <el-input v-model="declarationRecord.njmc" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="联系电话" prop="sj">
                  <el-input v-model="declarationRecord.sj" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目所在学院" prop="xymc">
                  <el-input v-model="declarationRecord.xymc" readonly></el-input>
                </el-form-item>
                <el-form-item label="申报项目类别" prop="xmlb">
                  <el-select v-model="declarationRecord.xmlb" placeholder="请选择项目类别">
                    <el-option
                    v-for="item in ['创新训练','创业训练','创业实践']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申报项目类型" prop="xmlx">
                  <el-select v-model="declarationRecord.xmlx" placeholder="请选择项目类型">
                    <el-option
                    v-for="item in ['一般项目','重点项目']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属一级学科" prop="ssyjxkmc">
                  <el-select v-model="declarationRecord.ssyjxkmc" placeholder="请选择">
                    <template v-for="item in yijixuekeData">
                      <el-option :key="item.xkbh" :label="item.xkmc" :value="item.xkmc">
                        <span style="float: left">{{ item.xkmc }}</span>
                        <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xkbh }}</span>
                      </el-option>
                    </template>
                  </el-select>
                </el-form-item>
                <el-form-item label="完成时间" prop="wcsj">
                  <el-date-picker style="width:100%;"
                    v-model="declarationRecord.wcsj"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="timestamp">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-button @click="onIntroductionConfirm" type="primary" size="mini">申请项目</el-button>
          <el-button @click="onCloseClick" size="mini">取消</el-button>
        </el-footer>
      </el-container>
      <!-- 项目申报内容 -->
      <el-tabs style="height:98%;" v-else v-model="activePage" @tab-click="pageChanged">
                <!-- 基本情况 -->
        <el-tab-pane label="基本情况" name="basic">
          <!-- 项目简况 -->
          <el-form ref="basicForm" :model="declarationRecord" :rules="declarationRules"
          label-position="right" label-width="150px" size="mini" status-icon>
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目名称：" prop="xmmc">
                  <el-input v-model="declarationRecord.xmmc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="完成时间：">
                  <el-date-picker style="width:100%;"
                    v-model="declarationRecord.wcsj" type="date" format="yyyy年MM月dd日" value-format="timestamp">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属一级学科" prop="ssyjxkmc">
                  <el-select v-model="declarationRecord.ssyjxkmc" placeholder="请选择">
                    <template v-for="item in yijixuekeData">
                      <el-option :key="item.xkbh" :label="item.xkmc" :value="item.xkmc">
                        <span style="float: left">{{ item.xkmc }}</span>
                        <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xkbh }}</span>
                      </el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目类型：" prop="xmlx">
                  <el-select v-model="declarationRecord.xmlx" placeholder="请选择项目类型">
                    <el-option
                    v-for="item in ['一般项目','重点项目']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目类别：" prop="xmlb">
                  <el-select v-model="declarationRecord.xmlb" placeholder="请选择项目类别">
                    <el-option
                    v-for="item in ['创新训练','创业训练','创业实践']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item> 
              </el-col>
            </el-row>
          </el-form>
          <!-- 申请人参加科研的经历 -->
          <simple-panel class="resume-container" :panelTitle="'申请人参加科研的经历'" :hasToolbar="true">
            <template slot="toolbar">
               <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" @click="onResumeAdd('researchResume')">增加</el-button>
            </template>
            <template slot="main">
              <el-table :data="researchResumeData" stripe border size="medium" style="width: 100%;height:100%">
                <template v-for="(col, index) in researchResumeColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button class="edit-btn" type="text" size="small" @click="onResumeEdit(scope.row,'researchResume', $event)">修改</el-button>
                    <el-button class="delete-btn" type="text" size="small" @click="onResumeDelete(scope.row,'researchResume', $event)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </simple-panel>
          <!-- 项目成员 -->
          <simple-panel :panelTitle="'项目组其他成员（不超过5人，不包括申请人和指导教师）'">
            <template slot="main">
              <dynamic-table :tableData="memberData" :columns="memberColumns" :islalCheck="true" buttonPosition="bottomLeft"
              addBtnText="添加成员" delBtnText="删除成员" :showInsBtn="false" delBtnClsType="danger">
              </dynamic-table> 
            </template>
          </simple-panel>
        </el-tab-pane> 
        <el-tab-pane label="拟申报项目情况" name="nsbxmqk">
          <el-form ref="nsbxmqkForm'" :model="declarationRecord" :rules="declarationRules"
          label-position="top" size="mini" status-icon>
            <el-form-item label="项目介绍（研究目标、研究背景及现状、工作原理和方案设想、计划进度安排等）">
              <el-input type="textarea" v-model="declarationRecord.xmjs" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="项目自我评价（创新点、实现的可能性、可操作性、可能存在的问题等）">
              <el-input type="textarea" v-model="declarationRecord.xmzwpj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="预期成果（成果的具体形式，如：研究报告、实验报告、调研报告、设计方案、计划书、申请专利、公开发表论文、出版著作、制作科技实物、软件程序、竞赛获奖、成果鉴定、成果应用证明等，可同时有多种成果形式。项目研究报告为必备成果。）">
              <el-input type="textarea" v-model="declarationRecord.xmcg" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="参考文献">
              <el-input type="textarea" v-model="declarationRecord.ckwx" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="指导教师简况及评价" name="zdjsjkjpj">
          <el-form ref="zdjsjkjpjForm_1'" :model="declarationRecord" :rules="declarationRules"
          label-position="right" label-width="120px" size="mini" status-icon>
            <el-row>
              <el-col :span="8">
                <el-form-item label="选择指导教师：" prop="jsbh">
                  <el-select v-model="declarationRecord.jsbh" placeholder="请选择" @change="teacherChange">
                    <template v-for="item in teacherData">
                      <el-option :key="item.jsbh" :label="item.xm" :value="item.jsbh">
                        <span style="float: left">{{ item.xm }}</span>
                        <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.gh }}</span>
                      </el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工号：">
                  <el-input v-model="selectedTeacher.gh" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政治面貌：">
                  <el-input v-model="selectedTeacher.zzmm" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="所在学院：">
                  <el-input v-model="selectedTeacher.xymc" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职务：">
                  <el-input v-model="selectedTeacher.zw" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职称：">
                  <el-input v-model="selectedTeacher.zc" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="性别：">
                  <el-input v-model="selectedTeacher.xb" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话：">
                  <el-input v-model="selectedTeacher.sj" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="E-mail：">
                  <el-input v-model="selectedTeacher.email" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form ref="zdjsjkjpjForm_2'" :model="declarationRecord" :rules="declarationRules"
          label-position="top" label-width="120px" size="mini" status-icon>
            <el-form-item label="当前从事的教学、研究工作简介：">
              <el-input type="textarea" v-model="declarationRecord.jsjj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="对申请人的专业基础、工作态度、学风及研究能力的评价：">
              <el-input type="textarea" v-model="declarationRecord.dxspj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="对申请课题的价值、研究方案的可行性、工作基础等方面的评价：">
              <el-input type="textarea" v-model="declarationRecord.dxmpj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="教师签字日期：" prop="jsqzrq">
              <el-date-picker style="width:100%;" v-model="declarationRecord.jsqzrq" type="date" value-format="timestamp" placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="申请资助金额和经费预算" name="sqzzjehjfys">
          <simple-panel :panelTitle="'经费来源'">
            <template slot="main">
              <el-form class="budget-form" ref="budgetForm" :model="declarationRecord" :rules="declarationRules"
              label-position="right" label-width="150px" size="mini" status-icon>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="学校立项资助：" prop="xxlxzzjf">
                        <el-input v-model="declarationRecord.xxlxzzjf">
                          <template slot="prepend">￥</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="学院配套资助：" prop="xyptzzjf">
                      <el-input v-model="declarationRecord.xyptzzjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="其他经费：" prop="qtjf">
                      <el-input v-model="declarationRecord.qtjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <h3>合计：￥{{jfhj}}</h3>
                  <span>项目经费支出科目范围：完成项目所需的材料费、加工费、实验费、资料费、差旅费、租赁费、出版（版面）费、专家咨询费、打印费、调研费、交通费、网络费、通讯费以及其他必要费用等，请对项目经费做合理预算。</span>
                </el-row>
              </el-form>
            </template>
          </simple-panel>
          <simple-panel :panelTitle="'经费支出预算'">
            <template slot="main">
              <dynamic-table :tableData="budgetData" :columns="budgetColumns" :islalCheck="true" buttonPosition="bottomLeft"
              addBtnText="添加预算条目" delBtnText="删除" :showInsBtn="false" delBtnClsType="danger">
              </dynamic-table> 
            </template>
          </simple-panel>
        </el-tab-pane>
        <el-tab-pane label="审核评审意见" name="shpsyj">
          <el-form ref="recommendationForm" :model="declarationRecord" :rules="declarationRules"
            label-position="top" size="mini" status-icon>
              <el-form-item label="申请人所在学院意见：" prop="szxyshyj">
                <el-input type="textarea" v-model="declarationRecord.szxyshyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="申请人所在学院日期：" prop="szxyshrq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.szxyshrq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="专家评审意见：" prop="zjpsyj">
                <el-input type="textarea" v-model="declarationRecord.zjpsyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="专家评审日期：" prop="zjpsrq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.zjpsrq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="学校审批意见：" prop="xxspyj">
                <el-input type="textarea" v-model="declarationRecord.xxspyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="学校审批日期：" prop="xxsprq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.xxsprq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-form>
        </el-tab-pane>
      </el-tabs>
	  </el-main>
  </el-container>
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info
var research = "researchResume"; // 表格名称

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证

//科研简历
var researchResumeColumns = [
  {
    prop: "dckyjkbh",
    label: "大创科研简况编号",
    hidden: true
  },
  {
    prop: "lxsj",
    label: "开始时间",
    type: "date",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "jssj",
    label: "结束时间",
    type: "date",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "xmmc",
    label: "项目名称",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "drgz",
    label: "担任工作"
  }
];

// 成员
var memberColumns = [
  {
    prop: "xmzcybh",
    label: "项目组成员编号",
    hidden: true
  },
  {
    prop: "xh",
    label: "学生姓名",
    type:"select",
    valueKey:"xh",
    labelKey:"xm",
    filterable:true,
    options:[],
    aboutColumns:{
      "xhstr":"xh",
      "xm":"xm",
      "xymc":"xymc",
      "zy":"zy",
      "xb":"xb"
    }
  }, 
  {
    prop:"xhstr",
    label:"学号"
  },
  {
    prop:"xb",
    label:"性别"
  },
  {
    prop:"xymc",
    label:"所在学院"
  },
  {
    prop:"zy",
    label:"专业"
  },
  {
    prop:"fg",
    label:"分功"
  }
];

// 预算支出明细
var budgetColumns =[
  {
    prop:"jfysmxbh",
    label:"经费预算明细编号",
    hidden:true
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    type:"input"
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number"
  },
  {
    prop:"ysgjhly",
    label:"预算根据和理由",
    type:"input"
  }
];

export default {
  name: "DecForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components: {
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table":DynamicTable
  },
  computed: {
     jfhj:function(){//经费合计
      var me = this;
      var xxlxzzjf = parseFloat(me.declarationRecord.xxlxzzjf);
      var xyptzzjf = parseFloat(me.declarationRecord.xyptzzjf);
      var qtjf = parseFloat(me.declarationRecord.qtjf);

      return xxlxzzjf+xyptzzjf+qtjf;
    }
  },
  methods: {
    onSaveClick: function() {// 保存表单
      console.log("保存！！！");// TODO 这里需要保存一些信息，要理一下
    },
    onCloseClick:function() {// 关闭页面
      this.$emit("form-close");
      //TODO 处理关闭逻辑，主要是清空record和表格内容
    },
    onIntroductionConfirm: function() {// 基本情况-确定
      var me = this;
      // 验证信息
      var ret;
      me.$refs.introductionForm.validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("表单信息有误");
        return;
      }
      //发送请求 提交并生成xmsbbh /static/data/testSuc.json
      me.getRequest("/static/data/declaration.json", me.declarationRecord).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success("提交成功！");
          me.declarationRecord = resp.data.data[0]; // 更新保存后的数据
        } else {
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    },
    pageChanged: function(tab, event) {//切换tab

    },
    teacherChange:function(selected){// 教师选择改变
      var me = this;
      var jiaoshi = me.arrUtil.findObjectByKey(me.teacherData,"jsbh",selected);
      console.log(jiaoshi);
      if(jiaoshi != null){
        me.selectedTeacher = jiaoshi;

        console.log("s=",me.selectedTeacher);
      }else{
        console.log("选择教师数据出错了");
      }
    }
  },
   data() {
    return {
      activePage: "basic",
      declarationRecord: {},
      declarationRules: {},
      facultyData: [],// 学院
      yijixuekeData:[],// 一级学科
      teacherData:[],// 教师
      selectedTeacher:{},// 选中的教师
      [research + columnsAttr]: researchResumeColumns, //科研简历表格列
      [research + dataAttr]: [], //科研简历数据
      [research + recordAttr]: {},
      [research + rulesAttr]: {},
      [research + dlgVisibleAttr]: false,
      memberColumns:memberColumns,//项目成员表格列
      memberData:[],
      budgetColumns:budgetColumns,// 经费支出列
      budgetData:[]

    };
  },
  created() {
    var me = this;
    me.declarationRules = me.formRules;// 冒泡进来
    me.declarationRecord = me.formRecord;// 冒泡进来
    // 表单模型初始化
    me[research + recordAttr] = formModelInitFromTable(me[research + columnsAttr]);
    // 表单验证初始化
    me[research + rulesAttr] = formRulesInitFromTable(me[research + columnsAttr]);

    // 查询学生-人员
    me.getRequest("/学生",{}).then(resp=>{
      if(resp.status == 200){
        me.memberColumns.forEach((col)=>{
          if(col.prop === "xh"){
            col.options = resp.data;
          }
        });
      }else{
        me.$message({
          message: "请求学生数据出错",
          type: "error"
        });
      }
    });

    // 查询教师
    me.getRequest("/static/data/teachers.json",{}).then(resp=>{
      if(resp.status == 200){
        me.teacherData = resp.data.data;
      }else{
        me.$message({
          message: "请求教师数据出错",
          type: "error"
        });
      }
    });

    // 查询学科数据
    me.getRequest("/static/json/yijixueke.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.yijixuekeData = resp.data;
      }
    });

  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

.declaration-form {
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    height: 100%;
    margin: 0;
    padding: 0;

    .el-tabs__header{
      margin-bottom: 0;
    }
    
    .resume-container {
      .resume-header {
        padding-top: 5px;
        border: solid 1px $--border-level-3;
      }

      .resume-main {
        margin: 0;
        padding: 0;
      }

      .edit-btn {
      }

      .delete-btn {
        color: $--origin-color-red;
      }
    }

    .budget-form{
      margin-top: 5px;
    }

    .el-form-item label{
      float: left;
    }

    @media screen and (max-height: 768px){
     .el-tabs__content{
        height: 80%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:768px) and (max-height: 875px){
     .el-tabs__content{
        height: 93%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:875px) and (max-height: 992px){
     .el-tabs__content{
        height: 94%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

  }
}
</style>
